<template>
  <div class="right-panel">
    <div class="panel-header">
      <p class="fz-14">组件属性</p>
    </div>
    <component
      :is="getComponent()"
      :elementData="elementData"
      @setFocus="setFocus"
    ></component>
  </div>
</template>

<script>
import cache from "./index.js";
export default {
  name: "right-panel",
  props: {
    // 数据参数
    elementData: {
      type: Object,
      default: () => {},
    },
    // 是否聚焦
    isFocus: {
      type: Boolean,
      default: () => false,
    },
  },
  data() {
    return {};
  },

  mounted() {},

  methods: {
    // 获取元素
    getComponent() {
      return cache[this.elementData.elementDesign];
    },
    // 设置是否聚焦
    setFocus(val) {
      this.$emit("update:isFocus", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.right-panel ::v-deep {
  border: 1px solid #e9e7ea;
  height: calc(100vh - 178px);
  overflow-y: scroll;
  width: 410px;
  padding: 22px;
  .panel-header {
    border-bottom: 1px solid #e9e7ea;
    padding-bottom: 22px;
  }
}
</style>
